<template>
    <div>
        <el-row :gutter="24">
            <el-col :span="1"
                    style="margin-right:10px;">
                <p class="queryLabel">实体名称:</p>
            </el-col>
            <el-col :span="6"
                    style="float: left;padding-right: 5px">
                <el-input size="small"
                          v-model="qualifiedName"
                          placeholder="输入类名称"
                          style="width:120!important"></el-input>
            </el-col>
            <el-col :span="1">
                <el-button type="primary"
                           size="small"
                           v-on:click='queryEntity'>查询</el-button>
            </el-col>
            <el-col :span="8"
                    style="text-align: right;margin-left:-3px;">
                <el-button type="primary"
                           size="small"
                           v-on:click="add">新增</el-button>
                <el-button type="primary"
                           size="small"
                           @click.native.prevent="edit()">编辑</el-button>
                <el-button type="primary"
                           size="small"
                           @click.native.prevent="start()">启用</el-button>
                <el-button type="primary"
                           size="small"
                           @click.native.prevent="stop()">停用</el-button>
                <el-button type="primary"
                           size="small"
                           @click.native.prevent="initCol()">初始化</el-button>
            </el-col>
            <el-col :span="6">
                <span>属性列表</span>
            </el-col>
        </el-row>
        <el-row :gutter="24">
            <el-col :span="16"
                    style="padding-right: 5px;">
                <el-table :data="impEntityGrid.dataList"
                          stripe
                          border
                          style="width: 100%"
                          @selection-change="handleSelectionChange"
                          highlight-current-row
                          @row-dblclick="dbClick">
                    <el-table-column type="selection"
                                     width="60"
                                     fixed>
                    </el-table-column>
                    <el-table-column prop="entityTitle"
                                     label="实体名称"
                                     width="300">
                    </el-table-column>
                    <el-table-column prop="qualifiedName"
                                     label="实体对象"
                                     fixed
                                     width="400">
                    </el-table-column>
                    <el-table-column label="状态"
                                     props="status"
                                     :formatter="statusCov"
                                     width="120">
                    </el-table-column>
                    <el-table-column prop="createTime"
                                     label="创建日期"
                                     :formatter="timeFormate"
                                     width="150"
                                     align="center">
                    </el-table-column>
                    <!--<el-table-column label="操作"
                                                                                                                                                     width="240"
                                                                                                                                                     fixed="right">
                                                                                                                                        <template scope="scope">
                                                                                                                                            <el-tooltip class="item"
                                                                                                                                                        effect="light"
                                                                                                                                                        content="编辑"
                                                                                                                                                        placement="top">
                                                                                                                                                <el-button type="primary"
                                                                                                                                                           size="mini"
                                                                                                                                                           class="iconfont icon-dingdan"
                                                                                                                                                           @click.native.prevent="edit(scope.$index)"></el-button>
                                                                                                                                            </el-tooltip>
                                                                                                                                            <el-tooltip class="item"
                                                                                                                                                        effect="light"
                                                                                                                                                        content="启用"
                                                                                                                                                        placement="top">
                                                                                                                                                <el-button type="info"
                                                                                                                                                           size="mini"
                                                                                                                                                           class="iconfont icon-kaishi"
                                                                                                                                                           @click.native.prevent="start(scope.$index)"></el-button>
                                                                                                                                            </el-tooltip>
                                                                                                                                            <el-tooltip class="item"
                                                                                                                                                        effect="light"
                                                                                                                                                        content="停用"
                                                                                                                                                        placement="top">
                                                                                                                                                <el-button type="warning"
                                                                                                                                                           size="mini"
                                                                                                                                                           class="iconfont icon-stop"
                                                                                                                                                           @click.native.prevent="stop(scope.$index)"></el-button>
                                                                                                                                            </el-tooltip>
                                                                                                                                            <el-tooltip class="item"
                                                                                                                                                        effect="light"
                                                                                                                                                        content="初始化"
                                                                                                                                                        placement="top">
                                                                                                                                                <el-button type="danger"
                                                                                                                                                           size="mini"
                                                                                                                                                           class="iconfont icon-bianji"
                                                                                                                                                           @click.native.prevent="initCol(scope.$index)"></el-button>
                                                                                                                                            </el-tooltip>
                                                                                                                                        </template>
                                                                                                                                    </el-table-column>-->
                </el-table>
                <el-pagination small
                               @current-change="pageChange"
                               :current-page="curPage"
                               :page-sizes="page.pageSizes"
                               :page-size="page.pageSize"
                               layout=" total,prev, pager, next"
                               :total="impEntityGrid.total">
                </el-pagination>
            </el-col>
            <el-col :span="8">
                <el-table :data="propsGrid"
                          stripe
                          border
                          style="width: 100%;"
                          height=500
                          highlight-current-row>
                    <!--  <el-table-column type="index"
                                         label="序号"
                                         width="60">
    
                        </el-table-column>
                        -->
                    <el-table-column prop="propertyName"
                                     label="属性名称">
                    </el-table-column>
                    <el-table-column prop="propertyTitle"
                                     label="属性标题">
                    </el-table-column>
                    <el-table-column label="操作"
                                     width="70">
                        <template scope="scope">
                            <el-tooltip class="item"
                                        effect="light"
                                        content="修改属性标题"
                                        placement="top">
                                <el-button type="primary"
                                           size="mini"
                                           class="iconfont icon-dingdan"
                                           @click.native.prevent="editProps(scope.$index)"></el-button>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination small
                               @current-change="propsChange"
                               :current-page="curPropsPage"
                               :page-sizes="page.pageSizes"
                               :page-size="page.pageSize"
                               layout=" total,prev, pager, next"
                               :total="propsTotal">
                </el-pagination>
            </el-col>
        </el-row>
        <!-- 新增实体-->
        <el-dialog title="实体信息"
                   v-model="entityFormShow">
            <el-form :model="entityFormData"
                     ref="entityForm"
                     :rules="entityRule"
                     label-width="140px">
                <el-form-item label="实体显示名称"
                              prop="entityTitle"
                              required>
                    <el-input size="small"
                              v-model="entityFormData.entityTitle"></el-input>
                </el-form-item>
                <el-form-item label="实体名称"
                              prop="qualifiedName"
                              required>
                    <el-input size="small"
                              v-model="entityFormData.qualifiedName"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer"
                 class="dialog-footer">
                <el-button @click="entityFormShow = false">取 消</el-button>
                <el-button type="primary"
                           @click="saveEntity">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 新增实体-->
        <el-dialog title="修改属性标题"
                   v-model="propsShow">
            <el-form :model="propsFormData"
                     ref="propsForm"
                     :rules="propsRule"
                     label-width="140px">
                <el-form-item label="属性名称"
                              prop="propertyName"
                              required>
                    <el-input size="small"
                              v-model="propsFormData.propertyName"
                              readonly></el-input>
                </el-form-item>
                <el-form-item label="属性标题名"
                              prop="propertyTitle"
                              required>
                    <el-input size="small"
                              v-model="propsFormData.propertyTitle"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer"
                 class="dialog-footer">
                <el-button @click="propsShow = false">取 消</el-button>
                <el-button type="primary"
                           @click="saveProps">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<!--数据脚本 -->
<script>
import moment from 'moment'

export default {
    data: function () {
        return {
            //分页设置
            page: this.page,
            //分组数据
            impEntityGrid: {
                total: 0,
                dataList: []
            },
            curPage: 0,
            //定义空数组，来判断 单选 选中哪一个
            multipleSelection: [],
            //查询条件
            qualifiedName: '',
            entityFormShow: false,
            entityFormData: {
                id: '',
                entityTitle: '',
                qualifiedName: '',
                status: '1',
                createTime: 0,
                createUser: "",
                updateTime: 0,
                updateUser: "",

            },
            entityEmptyData: {
                id: '',
                entityTitle: '',
                qualifiedName: '',
                status: '1',
                createTime: 0,
                createUser: "",
                updateTime: 0,
                updateUser: "",
            },

            entityRule: {
                entityTitle: [{
                    required: true,
                    message: '请输入显示名称',
                    trigger: 'blur'
                }],
                qualifiedName: [{
                    required: true,
                    message: '请输入实体名称',
                    trigger: 'blur'
                }],
            },
            /*******实体属性********/
            curEntityId: '',
            propsGrid: [],
            propsTotal: 0,
            curPropsPage: 0,
            propsShow: false,
            propsFormData: {
                id: '',
                entityId: '',
                propertyName: '',
                propertyTitle: '',
                displayIndex: 0,
                createTime: 0,
                createUser: window.localStorage.getItem("uid"),
                updateTime: 0,
                updateUser: window.localStorage.getItem("uid"),
            },
            propsEmptyData: {
                id: '',
                entityId: '',
                propertyName: '',
                propertyTitle: '',
                displayIndex: 0,
                createTime: 0,
                createUser: window.localStorage.getItem("uid"),
                updateTime: 0,
                updateUser: window.localStorage.getItem("uid"),
            },

            propsRule: {
                propertyTitle: [{
                    required: true,
                    message: '请输入属性标题',
                    trigger: 'blur'

                }],

            },
        }
    },
    methods: {

        queryEntity: function () {

            this.$http({
                method: 'GET',
                url: this.API_ROOT + '/base/dataentity/page',
                params: {
                    qualifiedName: this.$data.qualifiedName,
                    start: this.$data.curPage,
                    limit: this.$data.page.pageSize
                }

            }).then(function (resp) {
                resp.data.total = parseInt(resp.data.total);
                // es5写法
                this.$data.impEntityGrid = resp.data;
            }, function (error) {
                // error
            })

        },
        dbClick: function (row) {
            this.$data.curEntityId = row.id;
            this.queryProps();
        },
        pageChange: function (page) {
            this.$data.curPage = page;
            this.queryEntity();
        },
        add: function () {
            this.$data.entityFormData = Object.assign(this.$data.entityFormData, this.$data.entityEmptyData)
            this.$data.entityFormShow = true;

        },
        //复选框回调函数
        handleSelectionChange: function (val) {
            debugger;
            this.$data.multipleSelection = val;
        },
        reminderDelte: function () {
            debugger;
            if (this.$data.multipleSelection.length == 1) {
                this.openRemind(this.$data.multipleSelection[0].id)
            } else {
                this.$message.error("请选择一条数据")
            }
        },
        //
        edit: function () {
            if (this.$data.multipleSelection.length == 1) {
                this.$data.entityFormData = Object.assign(this.$data.entityFormData, this.$data.entityEmptyData)
                var data = this.$data.multipleSelection[0].id;
                this.$http.get(this.API_ROOT + '/base/dataentity/info', {
                    params: {
                        id: data,
                    }
                }).then(function (resp) {
                    this.$data.entityFormData = Object.assign(this.$data.entityFormData, resp.data.data);
                    this.$data.entityFormShow = true;
                }, function (error) { })
            } else {
                this.$message.error("请选择一条数据")
            }
        },
        start: function () {
            if (this.$data.multipleSelection.length == 1) {
                var data = this.$data.multipleSelection[0].id;
                this.$http({
                    method: 'POST',
                    url: this.API_ROOT + '/base/dataentity/start',
                    params: {
                        id: data,
                    }
                }).then(function (resp) {
                    this.$message(resp.data.msg);
                    this.queryEntity();
                }, function (error) {
                    // error
                })
            } else {
                this.$message.error("请选择一条数据")
            }
        },
        stop: function () {
            if (this.$data.multipleSelection.length == 1) {
                var data = this.$data.multipleSelection[0].id;
                this.$http({
                    method: 'POST',
                    url: this.API_ROOT + '/base/dataentity/stop',
                    params: {
                        id: data,
                    }
                }).then(function (resp) {
                    this.$message(resp.data.msg);
                    this.queryEntity();
                }, function (error) {
                    // error
                })
            } else {
                this.$message.error("请选择一条数据")
            }


        },
        initCol: function () {
            if (this.$data.multipleSelection.length == 1) {
                this.$confirm('此操作将删除原有数据，重新初始化, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    //调用初始化接口
                    var data = this.$data.multipleSelection[0].id;
                    this.$data.curEntityId = data.id;
                    this.$http({
                        method: 'POST',
                        url: this.API_ROOT + '/base/dataentity/init',
                        params: {
                            id: data,
                        }
                    }).then(function (resp) {
                        if (resp.data.success) {
                            this.$message(resp.data.msg);
                            //查询属性列表
                            this.queryProps();
                        } else {
                            this.$message.error(resp.data.msg);
                        }

                    }, function (error) {
                        // error
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消初始化'
                    });
                });
            } else {
                this.$message.error("请选择一条数据")
            }
        },
        saveEntity: function () {
            this.$refs.entityForm.validate(function (valid, $event) {
                // 验证通过
                if (valid) {
                    this.$http.post(this.API_ROOT + '/base/dataentity/save', this.$data.entityFormData)
                        .then(resp => {
                            if (resp.data.success) {
                                this.$message(resp.data.msg);
                                this.queryEntity();
                                this.$data.entityFormShow = false;

                            } else {
                                this.$message.error(resp.data.msg);
                            }
                        }, resp => {

                        });
                } else {
                    return false
                }
            }.bind(this));

        },
        //查询实体属性
        queryProps: function () {
            this.$http({
                method: 'GET',
                url: this.API_ROOT + '/base/dataentity/props',
                params: {
                    id: this.$data.curEntityId,
                    start: this.$data.curPropsPage,
                    limit: this.$data.page.pageSize
                }

            }).then(function (resp) {
                // es5写法
                this.$data.propsTotal = Number(resp.data.total);
                this.$data.propsGrid = resp.data.dataList;
            }, function (error) {
                // error
            })
        },

        propsChange: function (page) {
            this.$data.curPropsPage = page;
            this.queryProps();
        },
        editProps: function (index) {
            this.$data.propsFormData = Object.assign(this.$data.propsFormData, this.$data.propsEmptyData)
            var data = this.$data.propsGrid[index];
            this.$data.propsFormData = Object.assign(this.$data.propsFormData, data);
            this.$data.propsShow = true;


        },
        saveProps: function () {

            this.$refs.propsForm.validate(function (valid, $event) {
                // 验证通过
                if (valid) {
                    this.$http.post(this.API_ROOT + '/base/dataentity/saveProps', this.$data.propsFormData)
                        .then(resp => {
                            if (resp.data.success) {
                                this.$message(resp.data.msg);
                                this.queryProps();
                                this.$data.propsShow = false;

                            } else {
                                this.$message.error(resp.data.msg);
                            }
                        }, resp => {

                        });
                } else {
                    return false
                }
            }.bind(this));

        },
        statusCov: function (row, column) {
            return row.status == '1' || row.status == 1 ? "已启用" : "已停用";
        },
        timeFormate: function (row, column) {
            if (row.createTime == "" || row.createTime == null) return "";
            return moment(Number(row.createTime)).format("YYYY-MM-DD");
        }
    },
    created: function () {
        //查询
        this.queryEntity();
    }
}
</script>
<style>

</style>